<template>
    <div id="barChart">
        <div :id="'barChart' + i" style="width: 195px;height: 450px"
             :style='{marginLeft: (i ? "-20px" : "0px")}'
             v-for="(n, i) in barData" :key="i" />
    </div>
</template>

<script>
    export default {
        name: "barChart",
        components: {},
        props: {
            barData: {
                type: Array,
                default: () => []
            }
        },
        data() {
            return {
                barChart: {},
            }
        },
        created() {},
        mounted() {
            if (this.barData.length) {
                this.barData.forEach((v, i) => {
                    this.barChart['barChart' + i] = this.$echarts.init(document.getElementById('barChart' + i))
                    const data = v.data.map(v => {
                        v.name = v.name ? v.name : 'NULL'
                        return v
                    })
                    this.setOption(data, v.name, 'barChart' + i, i ? false : true)
                })
            }
        },
        methods: {
            setOption(data, name, id, y) {
                const color = ['#639bd2', '#e3823a', '#fac132', '#4774c0', '#7caa52','#2d5e8f']
                const option = {
                    title: {
                        text: '大同市致贫原因分析',
                        left: 19,
                        top: 15,
                        textStyle: {
                            color: '#fff'
                        }
                    },
                    color,
                    legend: {
                        width: 180,
                        bottom: 10,
                        left: 'center',
                        itemWidth: 4,
                        itemHeight: 4,
                        itemGap: 6,
                        textStyle: {
                            fontSize: 13,
                            color: '#898989'
                        },
                        data: data.map(v => v.name)
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '18%',
                        containLabel: true
                    },
                    xAxis: {
                        type: 'category',
                        axisLabel: {
                            color: '#898989'
                        },
                        axisLine: {
                            lineStyle: {
                                color: '#b4b4b4'
                            },
                            width: 5
                        },
                        axisTick: {
                            show: false,
                        },
                        data: [name]
                    },
                    yAxis: {
                        show: y,
                        type: 'value',
                        axisLabel: {
                            color: '#333'
                        },
                        axisLine: {
                            show: false
                        },
                        axisTick: {
                            show: false
                        },
                        splitLine: {
                            show: false
                        }
                    },
                    series: data
                };
                this.barChart[id].setOption(option)
            }
        }
    }
</script>

<style lang='stylus' scoped>
    #barChart {
        width 100%
        display flex
        justify-content center
    }
</style>
